import React, { Component, createRef } from "react";
import { Card, Button, Table, message, Modal } from "antd";
import { PlusOutlined, ArrowRightOutlined } from "@ant-design/icons";
import LinkButton from "../../components/link-button";
import {
  reqCategorys,
  reqAddCategory,
  reqUpdateCategory,
} from "../../api/index";
import AddForm from "./add-form";
import UpdateForm from "./update-form";
// import { } from "../../api/index"
class category extends Component {
  formRef = createRef();
  constructor() {
    super();
    this.state = {
      categorys: [],
      loading: false,
      parentId: 0, //当亲需要显示的分类的id
      parentsName: "", //分类名称
      subCategorys: [], //二级分类列表
      showStatus: 0, //1代表显示添加
      formList: {},
      bkCategorys: {},
      bkSubCategorys: {},
    };
  }

  showSubCategorys = (category) => {
    //先更新状态
    //   console.log( 111 );
    console.log(category._id);
    this.setState({
      parentId: category._id,
      parentsName: category.name,
    });
    setTimeout(() => {
      this.getCategorys();
      console.log(this.state.parentId);
    }, 100);
  };

  showCategorys = () => {
    this.setState({
      parentId: 0,
      parentsName: "",
      subCategorys: [],
    });
  };
  componentWillMount() {
    this.inintColums();
  }
  componentDidMount() {
    this.getCategorys();
  }
  inintColums = () => {
    this.columns = [
      {
        title: "分类的名称",
        dataIndex: "name",
      },
      {
        title: "操作",
        width: 300,
        render: (category) => (
          <span>
            <LinkButton onClick={() => this.showUpdate(category)}>
              修改分类
            </LinkButton>
            {this.state.parentId === 0 ? (
              <LinkButton
                onClick={() => {
                  this.showSubCategorys(category);
                }}
              >
                查看子分类
              </LinkButton>
            ) : null}
          </span>
        ),
      },
    ];
  };
  getCategorys = async () => {
    this.setState({ loading: true });
    const { parentId } = this.state;
    const res = await reqCategorys(parentId);
    // console.log(parentId);
    this.setState({ loading: false });
    if (res.data.status === 0) {
      //   console.log(res.data.data);
      const categorys = res.data.data;
      if (parentId === 0) {
        this.setState({ categorys });
        // console.log(this.state.categorys);
        //不能立即更新状态
      } else {
        this.setState({ subCategorys: categorys });
      }
    } else {
      message.error("获取分类列表失败");
    }
  };
  //显示添加
  showAdd = () => {
    this.setState({
      showStatus: 1,
    });
  };
  //显示修改
  showUpdate = (category) => {
    this.category = category;
    this.setState({
      showStatus: 2,
    });
  };
  //点击取消model
  handleCancel = () => {
    this.setState({
      showStatus: 0,
    });
  };

  //将子页面传过来的值放进状态里
  setForm = (value) => {
    if (value.parentId === 0) {
      this.setState({
        bkCategorys: value,
      });
    } else {
      this.setState({
        bkSubCategorys: value,
      });
    }
  };
  //点击添加
  addCategory = async () => {
    let list;
    if (!this.state.bkCategorys) {
      list = this.state.bkCategorys;
    } else {
      list = this.state.bkSubCategorys;
    }
    const res = await reqAddCategory(list.name, list.parentId);
    // console.log(res);
    if (res.data.status === 0) {
      this.getCategorys();
    }
    this.setState({
      showStatus: 0,
    });
  };
  //点击修改
	updateCategory = async () => {
	  //进行表单验证
		// console.log(this.formRef.current.onFinish);
		// this.formRef.current.onFinish = ( values ) => { 
		// 	console.log(values);
		// }
    let categoryId = this.category._id;
    let data = this.formRef.current.inputRef.current.props.value;
    const res = await reqUpdateCategory({ categoryId, categoryName: data });

    this.setState({
      showStatus: 0,
    });
    this.getCategorys();
  };
  render() {
    const {
      categorys,
      parentId,
      subCategorys,
      parentsName,
      showStatus,
    } = this.state;
    // console.log(subCategorys);
    const category = this.category || "";
    // console.log(category.name);
    const title =
      parentId === 0 ? (
        "一级分类列表"
      ) : (
        <span>
          <LinkButton onClick={this.showCategorys}>一级分类列表</LinkButton>
          <ArrowRightOutlined />
          <span>{parentsName}</span>
        </span>
      );
    const extra = (
      <Button type="primary" onClick={this.showAdd}>
        <PlusOutlined />
        添加
      </Button>
    );
    return (
      <Card title={title} extra={extra} style={{ width: "100%" }}>
        <Table
          loading={this.state.loading}
          bordered
          pagination={{ defaultPageSize: 5, showQuickJumper: true }}
          dataSource={parentId === 0 ? categorys : subCategorys}
          columns={this.columns}
        />
        <Modal
          title="添加分类"
          visible={showStatus === 1}
          onOk={this.addCategory}
          onCancel={this.handleCancel}
        >
          <AddForm
            categorys={categorys}
            parentId={parentId}
            setForm={this.setForm}
          />
        </Modal>
        <Modal
          title="修改分类"
          visible={showStatus === 2}
          onOk={this.updateCategory}
          onCancel={this.handleCancel}
        >
          <UpdateForm
            key={category._id}
            ref={this.formRef}
            categoryName={category.name}
          />
        </Modal>
      </Card>
    );
  }
}

export default category;
